<template> 
  <h1>个人信息</h1>
  <h2 v-show="person.name">姓名: {{person.name}}</h2>
  <h2>年龄: {{person.age}}</h2>
  <h2 v-show="person.sex">性别: {{person.sex}}</h2>
  <h2>工作岗位: {{person.job.type}}</h2> 
  <h2>工作薪资: {{person.job.salary}}</h2> 
  <h2>爱好:{{person.hobby}}</h2>
  <h2>c的值: {{person.job.a.b.c}}</h2>
  <button @click="changeInfo">点我更新个人信息</button>
  <button @click="addSex">点我添加一个 sex 属性</button>
  <button @click="deleteName">点我删除 name 属性</button>
</template>

<script>  
import {reactive} from 'vue'
export default {
  name: 'App',   
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        type: '前端工程师',
        salary: '30K',
        a:{
          b:{
            c:66
          }
        }
      },
      hobby: ['抽烟', '喝酒', '烫头']
    })  

    function changeInfo(){
      person.name = '李四'
      person.age = 28 
      person.job.salary = '60k'
      person.job.type = 'UI工程师'
      person.job.a.b.c = 99
      person.hobby[0] = '学习'
    } 

    function addSex(){
      person.sex = '男'
    }

    function deleteName(){
      delete person.name
    }

    // 返回一个对象 (常用)
    return {
      person,
      changeInfo,
      addSex, 
      deleteName 
    } 
  }
}
</script>

